import React, {Component} from 'react'
import {connect} from 'react-redux'

import './Order.scss'
import {getOrderListData} from '../actions/orderListAction.js'
import ListItem from './ListItem/ListItem.jsx'
import ScrollView from 'component/ScrollView/ScrollView.jsx'

class Order extends Component {
  constructor(props){
    super(props)
    this.page = 0
    this.state = {
      isend: false
    }
    this.fetchData(this.page)
  }
  loadPage(){
    this.page++
    if(this.page > 3){
      this.setState({
        isend: true
      })
    }else{
      this.fetchData(this.page)
    }
  }
  fetchData(page){
    this.props.dispatch(getOrderListData(page))
  }
  renderList(){
    let lists = this.props.lists
    return lists.map((item, index) => {
      return(
        <ListItem key={index} itemData={item}></ListItem>
      )
    })
  }
    render() {
        return ( 
            <div className='order'>
                <div className="header">订单</div>
                <ScrollView loadCallback={this.loadPage.bind(this)} isend={this.state.isend}>
                  <div className="order-list">{this.renderList()}</div>
                </ScrollView>
            </div>
        )
    }
}

export default connect(
  state => ({
    lists: state.orderListReducer.lists
  })
)(Order)